Уменьшить активную область блока div

[фонарик]

Есть блок див у которого есть свойство background-color с картинкой png. Из-за большой тени вокруг картинки размер самого блока больше чем сама картинка соответственно. Подскажите, как уменьшить активную область дива? Т.е если это ссылка или событие какое при наведении мышкой - чтобы они срабатывали, скажем, на плоскости дива что меньше оригинала например на 20%? Т.е чтобы при наведении не на картинку, а на её тень вокруг чтобы ничего не происходило.

http://jsfiddle.net/vyyTg/

Вот пример. Наводим на краешек дива он окрашивается. А нужно чтобы окрашивался только тогда, когда например мышка не на первом пикселе края дива а заехала на пятый или 10й

Или, быть может, можно как-то запихнуть, скажем, картинку размером 50х50 пикселей в блок див что имеет размер 40х40 пикселей и чтобы картинка отображалась полностью, а не обрезалась границами дива. Ну и блок див сам остался своего размера. Ничего не получается

Edited February 4, 2013 by фонарик

[фонарик]

Может я не совсем точно выразился Есть 2 задачи.

http://jsfiddle.net/Z3yy4/

1. Вот еще один пример - кнопка. У нее большая красная тень, я сделал ее ярче чтобы было нагляднее. Мышка до кнопки еще не доехала, а уже кнопка меняет цвет А нужно чтобы мышка, будучи над тенью, не меняла цвет див блоку (т.е чтобы никакие события при таком наведении не происходили)

2. Если первый вариант никак нельзя сделать, то быть можно сделать так как на картинке ? При условии что div_01 не имеет никакой картинки, а div_02 имеет картинку зеленой кнопки.

[McLotos]

Сам блок срабатывает только в случае когда он находится в фокусе, следовательно вам нужно уменьшить именно блок, а не его отображение. например если вы стилизуете ссылку, то нужно настроить реакцию на событие a:hover. а вообще чтобы понять в чем у вас ошибка. мне бы хотелось увидеть код.

[фонарик]

Сам блок срабатывает только в случае когда он находится в фокусе, следовательно вам нужно уменьшить именно блок, а не его отображение.

Не совсем понял, как это. Если уменьшить блок - то в него не влезет изображение кнопки целиком, т.е кнопка просто обрежется границами блока.

а вообще чтобы понять в чем у вас ошибка. мне бы хотелось увидеть код.

Тут дело в простой кнопке, которая стилизована и имеет тень изначально в своем изображении, а не оформлена посредством css. Если быть точнее - то дело в стиле. Тень вокруг кнопки большая, и размер дива в котором лежит эта кнопка - тоже больше, чтобы влезла вся кнопка с тенью. При наведении на кнопку, как показано в примере, она реагирует сменой цвета. Но получается некрасиво - мышька перекрашивает кнопку а визуально до нее еще не доехала. И обратный эффект тоже получается кривой: при убирании с дива мышки визуально мышка отъехала с кнопки, но она не становится прежней, потому что мышка над тенью. В общем, не знаю даже что и думать Кнопка с тенью выглядит красиво, жаль что нельзя на диве рисовать карту как на img блоке